<template>
  <a-select
      v-model:value="val"
      :disabled="disabled"
      :options="list"
      :field-names="{ label: fieldText, value: fieldValue }"
  />
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'

const props = defineProps({
  modelValue: String,
  fieldValue: {
    type: String,
    default: 'id'
  },
  fieldText: {
    type: String,
    required: true
  },
  data: {
    type: Function,
    required: true
  },
  disabled: Boolean
})

const val = computed({
  set: val => emits('update:modelValue', val),
  get: () => props.modelValue
})

const list = ref<[]>([])

const loadData = async () => {
  list.value = await props.data()
}

onMounted(() => {
  loadData()
})

const emits = defineEmits(['update:modelValue'])
</script>

<style scoped>

</style>
